<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>会员注册表单</h2>
    <form action="1.html" method="" name="myform">
        账号：<input type="text" name="uname"/> 8~16位的有效字符<br/><br/>
        密码：<input type="password" name="upass"/> 8~16位任意字符<br/><br/>
        邮箱：<input type="text" name="email"/><br/><br/>
        电话：<input type="text" name="phone"/><br/><br/>
        年龄：<input type="text" name="age"/><br/><br/>
        <input type="submit" value="提交"/>
    </form>

    <script>
        // 获取表单和提交按钮标签对象
        const myform = document.querySelector("form");
        // 为表单验证处理回调函数
        myform.onsubmit = function(){
            return checkName() && checkPass() && checkEmail();
        }
        // 验证账号
        function checkName(){
            let uname = myform.uname.value;
            if(new RegExp("^[0-9A-Za-z_]{8,16}$").test(uname)){
                return true;
            }
            alert("账号必须是8~16位的有效字符");
            return false;
        }

        // 验证密码
        function checkPass(){
            let upass = myform.upass.value;
            if(new RegExp("^.{8,16}$").test(upass)){
                return true;
            }
            alert("密码必须是8~16位的任意字符");
            return false;
        }
        

        // 验证邮箱
        function checkEmail(){
            let email = myform.email.value;
            //if(new RegExp(/^[0-9A-Za-z_\-\.]+@[0-9a-zA-Z_]+(\.[a-zA-Z]+){1,2}$/).test(email)){
            if(new RegExp("^[0-9A-Za-z_\\-\\.]+@[0-9a-zA-Z_]+(\\.[a-zA-Z]+){1,2}$").test(email)){
                return true;
            }
            alert("请输入正确的Email地址");
            return false;
        }

        // 电话 "^[1][3456789][0-9]{9}$"
        // 年龄 "^[0-9]{2}$"
        // \d 等价于 [0-9] 表示任意一位0~9数字
        // \D 等价于 [^0-9]  表示任意一位非0~9数字
        // \w 等价于 [0-9a-zA-Z_] 
        // \W 等价于 [^0-9a-zA-Z_] 
        // \s 代表任意一个空白符（非打印字符）
        // \S 代表任意一个非空白符
    </script>
</body>
</html>